<template>
       <div class="addarticle">
      
         
        <div>
                        <h1>添加文章</h1>
                </div>
                <el-divider />


                <div class="content">
                        <!-- 左侧表单区域 -->
                        <div class="left-content">
                                <h2>文章标题</h2>
                                <el-input v-model="title" placeholder="请输入标题" />

                                <h2>文章类型</h2>
                                <el-select v-model="articleType" placeholder="请选择类型">
                                        <el-option v-for="item in TypeOptions" :key="item.value" :label="item.label"
                                                :value="item.value" />
                                </el-select>

                                <h2>有趣度</h2>
                                <el-select v-model="articleFun" placeholder="请选择有趣度">
                                        <el-option v-for="item in FunOptions" :key="item.value" :label="item.label"
                                                :value="item.value" />
                                </el-select>
                                <el-button type="primary" plain class="ADDbutton" @click="addArticle">保存</el-button>
                                <wordshow  :text="content"></wordshow>
                        </div>

                        <!-- 右侧内容区域 -->
                        <div class="right-content">
                                <h2>文章内容</h2>
                                <el-input v-model="content" :rows="17" type="textarea" placeholder="请输入文章内容" />
                        </div>
                </div>
        </div>
        


</template>
<script setup name="Addarticle">
import { Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
import axios from 'axios';
import { onMounted } from 'vue';
import { da } from 'element-plus/es/locales.mjs';
import { ElMessage } from 'element-plus'
import wordshow from '@/components/wordshow.vue';



let TypeOptions = ref([
        {
                value: '0',
                label: '所有',
        }
])

let FunOptions = ref([
        {
                value: '0',
                label: '0',
        },
        {
                value: '1',
                label: '1',
        },
        {
                value: '2',
                label: '2',
        },
        {
                value: '3',
                label: '3',
        }, {
                value: '4',
                label: '4',
        },
        {
                value: '5',
                label: '5',
        },
        {
                value: '6',
                label: '6',
        }, {
                value: '7',
                label: '7',
        }, {
                value: '8',
                label: '8',
        }, {
                value: '9',
                label: '9',
        }, {
                value: '10',
                label: '10',
        },
])

//文章的类型
const articleType = ref('');
//趣味度的级别
const articleFun = ref('');
//文章名
let title = ref("")
//文章内容
let content=ref("")






const addArticle = async () => {
       if(title.value==""||content.value==""||articleType.value==""||articleFun.value==""){
        ElMessage({
                message: '请填写完整',
                type: 'error',
        })
        return
       }
        const {data} = await axios.post('http://localhost:8080/article/addArticle', {
                title: title.value,
                content: content.value,
                type: articleType.value,
                fun: articleFun.value
        });
        if (data.success) {
                ElMessage({
                        message: '添加成功',
                        type: 'success',
                })
                title.value=""
                content.value=""
                articleType.value=""
                articleFun.value=""
        } else {
                console.log('添加失败', data.message)
        }

}


const getArticleType = async () => {
        const { data } = await axios.get('http://localhost:8080/type/getTypeList');
        if (data.success) {
                TypeOptions.value = data.data
        } else {
                console.log('获取分类失败', data.message)
        }

}
 


onMounted(() => {
        getArticleType();
})





</script>

<style scoped>
.addarticle {
        margin: 0 auto;
        width: 90%;
        height: 90%;
        background-color: #ffffff;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* 新增布局样式 */
.content {
        display: flex;
        /* 启用弹性布局 */
        justify-content: space-between;
        /* 左右内容两端对齐 */
}

.left-content {
        width: 35%;
        /* 左侧宽度占比 */
        padding-right: 20px;
        /* 右侧留出间距 */
}

.right-content {
        width: 63%;
        /* 右侧宽度占比 */
}

/* 统一标题样式 */
h2 {
        margin: 15px 0 10px;
        color: #333;
}

/* 调整文本域宽度 */
.el-textarea {
        width: 100% !important;
        /* 充满容器 */
}
.ADDbutton{

        width: 200px;
        height: 40px;
        margin-top: 20px;
        margin-left: 10px;
}       
</style>